<template>
    <div>
        <van-nav-bar title="申请表" left-text="返回" left-arrow @click-left="onClickLeft" :fixed="true" />
        <van-form @failed="onFailed" @submit="submit" style="margin-top: 2.5rem">
            <van-cell-group>
                <van-field name="hasExperience" required :rules="[{ required: true, message: '请选择养宠经验' }]" label="养宠经验">
                    <template #input>
                        <van-radio-group v-model="state.hasExperience" direction="horizontal">
                            <van-radio name="true">有</van-radio>
                            <van-radio name="false">无</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field name="age" v-model="state.age" :rules="[{ required: true, message: '请填写你的年龄' }]" required
                    is-link readonly label="我的年龄" @click="state.showPicker = true" />
                <van-field name="gender" required :rules="[{ required: true, message: '请选择你的性别' }]" label="我的性别">
                    <template #input>
                        <van-radio-group v-model="state.gender" direction="horizontal">
                            <van-radio name="male">男</van-radio>
                            <van-radio name="female">女</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field name="maritalStatus" :rules="[{ required: true, message: '请选泽婚姻状况' }]" required label="婚姻状况">
                    <template #input>
                        <van-radio-group v-model="state.maritalStatus" direction="horizontal">
                            <van-radio name="已婚">已婚</van-radio>
                            <van-radio name="未婚">未婚</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field required v-model="state.occupation" name="occupation" label="我的职业" placeholder="请填写你的职业"
                    :rules="[{ required: true, message: '请填写你的职业' }]" />
                <van-field v-model="state.location" :rules="[{ required: true, message: '请选择所在地' }]" required is-link
                    readonly name="area" label="地区选择" placeholder="点击选择省市区" @click="state.showArea = true" />
                <van-popup v-model:show="state.showArea" position="bottom">
                    <van-area :area-list="areaList" @confirm="selectLocation" @cancel="state.showArea = false" />
                </van-popup>
                <van-field v-model="state.toapplicant" name="toapplicant" rows="5" autosize label="给送养人的话" type="textarea" maxlength="100"
                    placeholder="请输入宠物描述" show-word-limit />
                <van-popup v-model:show="state.showPicker" round position="bottom">
                    <van-picker :columns="state.columns" @confirm="selectAge" @cancel="state.showPicker = false" />
                </van-popup>
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script setup lang='ts'>

import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { areaList } from '@vant/area-data';
import { userStore } from '@/store';

import {approval} from '@/api'
const router = useRouter()
const user = userStore()

const state = reactive({
    gender: '',
    result: '',
    age: '',
    hasExperience: undefined,
    maritalStatus: undefined,
    showArea: false,
    showPicker: false,
    location: '',
    occupation: '',
    toapplicant: '',
    areaList,
    onConfirm(value: any) {
        state.result = value.map((item: any) => item.name).join('/');
        state.showArea = false;
    },
    columns: [
        { text: '10后', value: '10后' },
        { text: '00后', value: '00后' },
        { text: '90后', value: '90后' },
        { text: '80后', value: '80后' },
        { text: '70后', value: '70后' },
        { text: '60后', value: '60后' },
        { text: '50后', value: '50后' }
    ]
})

const onClickLeft = () => {
    router.back()
}


const onFailed = (errorInfo: any) => {
    console.log('failed', errorInfo);
};

const selectAge = (e: any) => {
    state.age = e.selectedValues[0]
    state.showPicker = false
}

const selectLocation = (e: any) => {
    let location: string = ''
    e.selectedOptions.forEach((element: any) => {
        location += element.text
    });
    state.location = location
    state.showArea = false
}

const submit = (data: any) => {
    let petId = router.currentRoute.value.query.id;
    let publish_id = user.cardList.find(item => item.card_id == petId)!?.publisher_id
    const params = {
        petId,
        approvaler_id: user.userInfo.user_id,
        applicant_id:publish_id,
        ...data
    }
    
    approval(params).then((res: any) => {
        if (res.code === 200) {
          /*   const  data: Message = { message: '您收到一条申请通知！',type:'system', senderId: 'system', receiverId: publish_id }
            if (proxy.$socket.connected) {
                proxy.$socket.emit('receive', data)
            } */
            router.push('/')
        }
    })
}

</script>

<style lang='less' scoped></style>
